import Taro from '@tarojs/taro'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { View, Button, Text } from '@tarojs/components'
import { add, minus, asyncAdd } from '../../actions/counter'
import './index.less'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  counter: {
    num: number
  }
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface Index {
  props: IProps;
}

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class Index extends Component {

  state={
    title:'首页'
  };

  componentDidMount(){
    console.log("componentDidMount");
  }

  componentWillReceiveProps (nextProps) {
    console.log("componentWillReceiveProps");
    console.log(this.props, nextProps)
  }

  shouldComponentUpdate(_nextProps,_nextState){
    console.log("shouldComponentUpdate",_nextProps,_nextState)
    return true;
  }

  UNSAFE_componentWillUpdate(){
    console.log("UNSAFE_componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate");
  }

  componentWillUnmount () {
    console.log("componentWillUnmount")
  }

  componentDidShow () {
    console.log("componentDidShow")
   }

  componentDidHide () {
    console.log("componentDidHide")
  }

  navigateToAlbum=()=>{
    Taro.navigateTo({
      url: '/pages/album/index'
    })
  };

  navigateToModel=()=>{
    Taro.navigateTo({
      url: '/pages/model/index'
    })
  };

  render () {
    const {title=''}=this.state;
    return (
      <View className='index'>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World 1</Text></View>
        <View><Text>hehe {title}</Text></View>
        <Button onClick={this.navigateToAlbum}>专辑页面</Button>
        <Button onClick={this.navigateToModel}>模特页面</Button>
      </View>
    )
  }
}

export default Index

